<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-02-08 09:22:41
 * @LastEditors: htang
 * @LastEditTime: 2024-02-08 11:38:08
-->
<template>
  <div class="pump-video-player">
    <video id="videoElement" autoplay controls></video>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed, getCurrentInstance, nextTick, onMounted, onUnmounted } from 'vue';
import '@/assets/js/flv.min.js';

const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设

let player = null;

let playURL = ref('ws://192.168.1.70:8000/live/demo.flv');

function createPlayer() {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: playURL.value,
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
}

onMounted(() => {
  createPlayer();
});
</script>

<style lang="less" scoped>
.pump-video-player {
  width: 100%;
  height: 100%;
  #player {
    width: 100%;
    height: 100%;
  }
}
</style>